<template>
  <div class="login">
    <el-form class="login_form">
      <h1>{{ msg }}</h1>
      <el-row>
        <el-col>
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="用户名"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-input
            type="show-password"
            v-model="loginForm.password"
            prefix-icon="el-icon-key"
            placeholder="密码"
            show-password
          >
          </el-input>
        </el-col>
      </el-row>
      <el-button style="width: 100%" @click="handleLogin" type="primary"
        >登陆</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { login } from "@/api/users";
export default {
  name: "Index",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
      msg: "子金XX管理系统",
    };
  },
  methods: {
    handleLogin() {
      if (this.loginForm.username != "" && this.loginForm.password != "") {
        login(this.loginForm).then((res) => {
          if (res.success == true) {
            window.localStorage.setItem("token", res.token);
            window.localStorage.setItem("userCode",this.loginForm.username)
            //存储信息
            console.log(window.localStorage.getItem("token"));
            this.$message({type:'success',message:"登录成功！"})
            this.$router.push("/home");
          } else {
            this.$message({type:'error',message:"用户名或者密码错误！"})
            // alert("用户名或者密码错误！");
          }
        });
      } else {
        this.$message({type:'error',message:"请输入用户名密码"})
        //alert("请输入用户名密码");
      }

      //alert("欢迎来到子金XX管理系统");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login_form {
  border: #ccc 1px solid;
  width: 26%;
  padding: 1%;
  margin-left: 36%;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
</style>
